<template>
	<div class="newsdetails-box">
		<headerNav></headerNav>
		<serviceIcon></serviceIcon>
		<div class="newsbanner">
			<div class="newstitle cbody">
				<h4>新闻动态
					<p>NEWS AND TRENDS</p>
				</h4>
			</div>
		</div>
		<div class="newsdetails">
			<div class="cbody">
				<h4>
					<span>{{newsDetails.title}}</span>
					<p>{{util.formatDateTime(newsDetails.time)}}</p>
				</h4> 
				<div class="textConent">
					<p v-cloak v-html="newsDetails.content">
						
					</p>
				</div>
				<div class="bottom">
					<span class="last" :class=" this.beforenoMore == true ? ' noMore' : ''" @click="next(0)">上一条：{{newsDetails.beforeTitle || text}}</span>
					<span class="next" :class=" this.afternoMore == true ? ' noMore' : ''" @click="next(1)">下一条：{{newsDetails.afterTitle || text}}</span>
				</div>
			</div>
		</div>
		<footerNav></footerNav>
	</div>
</template>

<script>
	import headerNav from './template/header'
	import serviceIcon from './template/service'
	import footerNav from './template/footer'
	import api from '../../api/loginApi'
	import util from '../../common/js/util'
	export default {
		data() {
			return {
				newsDetails:[],
				articleId:this.$route.query.articleId,
				util:util,
				text:'',
				afternoMore:false,
				beforenoMore:false,
			}
		},
		components: {
			headerNav,
			serviceIcon,
			footerNav
		},
		methods: {
			next(type){
				if(type == 0){
					var  articleId = this.newsDetails.articleId;
					this.getNewlyArticleDetailNext(articleId,type);
				}
				if(type == 1){
					var  articleId = this.newsDetails.articleId;
					this.getNewlyArticleDetailNext(articleId,type);
				}
			},
			getNewlyArticleDetailNext: function(articleId,turnPiece) {
				var par = {
					articleId:articleId,
					turnPiece:turnPiece
					
				}
				api.getNewlyArticleDetail(par, (res) => {
					//					res = JSON.parse(res);
					if(res.code == 0) {
						this.newsDetails = res.data;						
						if(this.newsDetails.afterTitle == ''){
							this.text = '没有了'
							this.afternoMore = true
						}else if(this.newsDetails.beforeTitle == ''){
							this.text = '没有了'
							this.beforenoMore = true
						}else{
							this.afternoMore = false
							this.beforenoMore = false
						}
					}else if(res.code == 1007){
						this.text = '没有了'
					}
				});
			},
			getNewlyArticleDetail: function() {
				var par = {
					articleId:this.articleId,				
				}
				api.getNewlyArticleDetail(par, (res) => {
					//					res = JSON.parse(res);
					if(res.code == 0) {
						this.newsDetails = res.data;
					if(this.newsDetails.afterTitle == ''){
							this.text = '没有了'
							this.afternoMore = true
						}else if(this.newsDetails.beforeTitle == ''){
							this.text = '没有了'
							this.beforenoMore = true
						}else{
							this.afternoMore = false
							this.beforenoMore = false
						}
					}else if(res.code == 1007){
						this.text = '没有了'
					}
				});
			},
		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted() {
			this.getNewlyArticleDetail();
		}
	}
</script>

<style lang="scss">
	.newsdetails-box {
		background: #FFFFFF;
		height: 100%;
		h4,
		p {
			margin: 0;
		}
		.cbody {
			width: 1280px;
			margin: 0 auto;
		}
		.newsdetails {
			padding-top: 110px;
			padding-bottom: 100px;
		}
		.newsdetails h4 {
			font-family: MicrosoftYaHei;
			text-align: center;
			font-weight: normal;
		}
		.newsdetails h4 span {
			font-size: 24px;
			color: #222222;
		}
		.newsdetails h4 p {
			font-size: 18px;
			color: #8C8C8B;
			margin-top: 12px;
		}
		.newsdetails h4 p:after {
			content: "";
			display: block;
			margin: 15px auto 0;
			width: 35px;
			height: 4px;
			background: #2B89FC;
		}
		.newsbanner {
			position: relative;
			background: #fff;
		}
		.textConent{
			border-top: 1px solid #ECECEC;
			margin-top: 36px;
			text-align: center;		
			padding-top: 15px;	
			img{
				// padding-top:35px;
				width: 400px;
				height: auto;
			}
			p{
				width: 100%;
				text-align: left;
				// margin-top: 15px;
				line-height: 35px;
				font-size: 16px !important;
				text-indent: 2em !important;
				img{
					
					display: block;	
					margin: 0 auto ;					
					/*text-align: center;*/
				}
			}
		}
		.bottom{
			display: inline-block;
			margin-top: 44px;
			span{
				display: block;
				color: #222222;
				font-size: 16px;
				margin-bottom: 10px;
				&:last-child{
					margin-bottom: 0;
				}
			}
			.last:hover,.next:hover {
				color:#2B89FC;
				text-decoration: underline;
				cursor: pointer;
			}
			.noMore{
				color: #222222 !important;
				text-decoration: none !important;
				cursor: default  !important; 
			}
		}
		.newstitle {
			height: 350px;
			background: url('../../../static/images/news.jpg') no-repeat;
			background-size: 100% auto;
			/*background-attachment: fixed;*/
		}
		.newstitle h4 {
			font-size: 36px;
			font-family: MicrosoftYaHei;
			color: #fff;
			text-align: center;
			font-weight: normal;
			position: absolute;
			margin: 0;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			/* IE 9 */
			-webkit-transform: translate(-50%, -50%);
			/* Safari and Chrome */
			-o-transform: translate(-50%, -50%);
			/* Opera */
			-moz-transform: translate(-50%, -50%);
			/* Firefox */
		}
		.newstitle h4 p {
			margin: 20px 0 0 0;
		}
		.newslist {
			padding-top: 115px;
			padding-bottom: 180px;
		}
	}
</style>